<template>
  <div class="head">
    <div class="title">
      <van-image :src="userStore.avatar" fit="cover" height="20vw" round width="20vw" />
      <div style="margin-top: auto; margin-bottom: auto">
        <template v-if="userStore.getLoginState">
          <div class="name">{{ userStore.name }}</div>
          <div class="group">{{ userStore.deptName }}</div>
        </template>
        <template v-else>
          <div class="name" @click.prevent="handleLogin">点击登录</div>
        </template>
      </div>
    </div>
  </div>
  <slot></slot>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import { useUserStore } from '@/framework/store/user'
import { useRefreshStore } from '@/framework/store/layout/refresh'
import { useRouterStore } from '@/framework/store/router'

const _ = getInstance()
const refreshStore = useRefreshStore()
const userStore = useUserStore()
const routerStore = useRouterStore()
const handleLogin = () => {
  routerStore.blockReturn(true, () => {
    userStore.showLogin = false
    routerStore.blockReturn(false, () => {})
  })
  userStore.showLogin = true
}
onMounted(() => {
  refreshStore.enableRefresh(() => {}, true)
})
</script>

<style lang="less" scoped>
.head {
  margin-top: -10vw;
  height: 60vw;
  background: url('@/framework/assets/images/my_title_bg.png');
  background-size: 100% 100%;

  .title {
    display: flex;
    padding-top: 20vw;
    margin-left: 10vw;

    .name {
      margin-left: 10vw;
      font-size: 6vw;
    }

    .group {
      margin-left: 10vw;
      margin-top: 3vw;
    }
  }
}
</style>
